<template>
	<CustomNavBar :showBack="false" :bgColor="data.bgColor">
		<template #title>
			<view class="shouc">
				消息
			</view>
		</template>
	</CustomNavBar>
	<view class="nav_top">
		<image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/bgpages.png" mode="widthFix" class="bgImg">
		</image>
	</view>
	<view class="pages" :style="{ paddingTop: `${data.navBarHeight}px` }">

		<view class="input_box">

		</view>
		<view class="bgsty">

		</view>
		<view class="pagesVies">
			<view class="list_block">
				<view class="list" v-for="(item,index) in messageList" :key="index" @click="handleJump(item.messageType,item.id,index)">
					<image :src="item.iconUrl" mode="" class="icon"></image>
					<view class="title">{{item.title}}</view>
					<view class="des">{{item.message}}</view>
					<image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/rightIcon.png" mode="widthFix"
						class="more_icon"></image>
					<view class="dot" v-if="item.status == 0"></view>
					<view class="line">
					</view>
				</view>
			</view>

			<!-- <view class="list_block">
				<view class="list" v-for="(item,index) in list2" :key="index">
					<image :src="item.iconPath" mode="" class="icon"></image>

					<view class="title">{{item.title}}</view>
					<view class="des">{{item.des}}</view>
					<image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/rightIcon.png" mode="widthFix"
						class="more_icon"></image>
					<view class="dot"></view>
					<view class="line">
					</view>
				</view>
			</view> -->
			<view class="main dis" style="z-index: 9999;height: 80vh;" v-if="messageList.length==0">
				<view style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
					<image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/noData.png" mode="aspectFit" style="width: 200rpx;height: 200rpx;"></image>
					<text>暂无消息</text>
				</view>
			</view>
			<view style="width: 100%;height: 30rpx;">

			</view>
		</view>
	</view>
</template>

<script setup>
	import CustomNavBar from '@/components/CustomNavBar.vue';
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	import {
		noticePage,read
	} from './js/api.js'
	import {onShow} from '@dcloudio/uni-app'
	
	const app = getApp()
	const data = reactive({
		navBarHeight: 0,
		bgColor: ''
	})
	onMounted(() => {
		data.navBarHeight = app.globalData.navBarHeight + app.globalData.statusBarHeight + 15
		
	})
	onShow(()=>{
		getNoticePage()
		wx.removeTabBarBadge({ index: 2 });
	})
	const handleJump = (type,id,index)=>{
		let pathUrl =""
		
		console.log('app.globalData.userType',app.globalData.userType,type)
		if(type == 1 || type == 2 || type == 3){
			pathUrl = '/pagesA/myOrders/myOrders'
		}else if(type == 4 || type == 5){
			pathUrl ="/pagesA/mycontract/mycontract"
		}else if( type == 7 && app.globalData.userType == 2){
			pathUrl ="/pagesA/mycontract/mycontract"
		}else if( type == 7 && app.globalData.userType == 4){
			pathUrl ="/pagesA/mySubscribe/mySubscribe?type=admin&tabIndex=2"
		}
		else{
			pathUrl = "/pagesA/mySubscribe/mySubscribe"
		}
		read(id)
		// console.log(messageList.value[index])
		messageList.value[index].status = 1
		// getNoticePage()
		
		uni.navigateTo({
			url:pathUrl
		})
	}
	const paramsData = reactive({
		pageNo: 1,
		pageSize: 10
	})
	const messageList = ref([])
	const getNoticePage = async () => {
		let res = await noticePage(paramsData)
		console.log('res===', res)
		if (res.data.code == 0) {
			let list = res.data.data.list
			messageList.value = list
		}
	}
	const list = reactive([{
			id: 1,
			title: "缴房租",
			iconPath: '/static/message/payment.svg',
		},
		{
			id: 2,
			title: "缴水电费",
			iconPath: '/static/message/payment.svg',
		},
		{
			id: 3,
			title: "缴维修费",
			iconPath: '/static/message/payment.svg'
		}
	])
	const list2 = reactive([{
			id: 1,
			title: "合同签约",
			iconPath: '/static/message/contract.svg',
			des: '您有待签约合同,请点击前往查看'
		},
		{
			id: 2,
			title: "合同临期",
			iconPath: '/static/message/contract.svg',
			des: '您的合同有效期即将到期，请点击前往查看'
		},
		{
			id: 3,
			title: "预约看房",
			iconPath: '/static/message/seehouse.svg',
			des: '已临近您的看房时间，点击前往查看你的预约信息'
		}
	])
</script>

<style lang="less" scoped>
	.nav_top {

		position: fixed;
		height: 393rpx;
		top: 0;
		width: 750rpx;
		z-index: -1;
		background: #FFF7E0;

		.bgImg {
			width: 100%;
			height: 393rpx;
		}
	}

	.shouc {
		font-family: PingFangSC-Semibold;
		font-size: 34rpx;
		color: #000000;
		text-align: center;
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.pages {
		height: 100%;
		margin-bottom: 32rpx;

		.nav_top {}

		.input_box {
			background: #FFFFFF;
			border-radius: 16rpx;
			height: 200rpx;
			width: 710rpx;
			margin: auto;
			// margin-bottom: 20rpx;
			// width: 100%;
		}

		// .bgsty{
		// 	width: 750rpx;
		// 	height: 20rpx;
		// }

		.pagesVies {
			width: 100%;
			margin: auto;
			background-image: linear-gradient(180deg, #FFF7E0 0%, #FFF9E8 19%, #F6F6F6 100%);
			height: calc(100vh - 320rpx);
			// margin-top: 20rpx;
			padding-top: 20rpx;

			.list_block {
				margin-top: 32rpx;
				width: 710rpx;
				margin: auto;
				border-radius: 16rpx;
				margin-bottom: 20rpx;

				.list {
					background: #FFFFFF;
					padding: 32rpx 64rpx 0rpx 124rpx;
					position: relative;

					.title {
						font-family: PingFangSC-Semibold;
						font-size: 28rpx;
						color: #333333;
						line-height: 30rpx;
						font-weight: 600;
					}

					.des {
						margin-top: 16rpx;
						font-family: PingFangSC-Regular;
						font-size: 24rpx;
						color: #666666;
						line-height: 30rpx;
						font-weight: 400;
					}

					.line {
						margin-top: 30rpx;
						width: 100%;
						height: 1rpx;
						background: #EEEEEE;
						// border-bottom: 1rpx solid #EEEEEE;
					}

					.icon {
						width: 68rpx;
						height: 68rpx;
						position: absolute;
						top: 24rpx;
						left: 24rpx;
					}

					.more_icon {
						position: absolute;
						top: 54rpx;
						right: 32rpx;
						width: 24rpx;
						// height: 40rpx
					}

					.dot {
						position: absolute;
						width: 20rpx;
						height: 20rpx;
						background: orangered;
						border-radius: 50%;
						top: 24rpx;
						left: 80rpx;
					}
				}
			}
		}

	}
</style>